<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/archives.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_moduless/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>
<div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 70px">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="timebox card mt-3 bg-light">
                        <div class="timeline mt-3" v-for="(article, i) in articleList">
                            <h3>
                                {{article.year}}
                            </h3>
                            <ul>
                                <li v-for="(articleObj, i) in article.articleList">
                                    <h4>
                                        {{articleObj.day}}<span>{{articleObj.month}}</span>
                                    </h4>
                                    <a :href="'blogdetail.html?' + articleObj.id" target="_blank">
                                        {{articleObj.articleName}}
                                    </a>
                                </li>

                            </ul>



                        </div>
                    </div>
                </div>

                <!-- 侧边栏
                    sidebar：用于使用jQuery引入侧边栏组件
                    col-md-4：此侧边栏站整个网格的4份
                    mb-5：侧边栏距离下面5rem
                    d-none d-sm-block：在xs尺寸下隐藏，适用于手机
                -->
                <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                    <my-sidebar></my-sidebar>
                </div>
            </div>
        </div>
    </section>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            articleList: [],

        },
        methods: {
            //获取归档文章信息
            getBlogGdList() {

                //向后台发请求，获取文章按日期分组数据
                this.$http.get("/article/getBlogGdList/").then(result => {

                    this.articleList = result.data;
                }).catch(result => {
                    this.$message.error("系统繁忙，请稍后重试");
                });
            },
        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue'),
            'my-sidebar': httpVueLoader('./common/sidebar.vue')
        },
        mounted() {
            this.getBlogGdList()
        }
    })

</script>

</body>

</html>